<template>
  <div class="dia-form">
    <el-row :gutter="50">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="150px"
      >
        <el-col :span="24">
          <div class="tips">基础信息</div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事件名称" prop="field101">
            <el-input
              v-model="formData.field101"
              placeholder="请输入事件名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标识符" prop="field102">
            <el-input
              v-model="formData.field102"
              placeholder="请输入标识符"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事件简称" prop="field103">
            <el-input
              v-model="formData.field103"
              placeholder="请输入事件简称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="指标来源依据" prop="field104">
            <el-input
              v-model="formData.field104"
              placeholder="请输入指标来源依据"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否展示" prop="field105">
            <el-radio-group v-model="formData.field105" size="medium">
              <el-radio
                v-for="(item, index) in field105Options"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="tips">基础信息</div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事件级别" prop="field107">
            <el-select
              v-model="formData.field107"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field107Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事件分类" prop="field108">
            <el-select
              v-model="formData.field108"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field108Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="对象分类" prop="field109">
            <el-select
              v-model="formData.field109"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field109Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="风险分类" prop="field110">
            <el-select
              v-model="formData.field110"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field110Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事件分类" prop="field">
            <el-cascader
              v-model="formData.field111"
              :options="field111Options"
              prop="field111"
              :props="{ expandTrigger: 'hover' }"
              :style="{ width: '100%' }"
              placeholder="请选择级联选择"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分保技术要求大类" prop="field112">
            <el-select
              v-model="formData.field112"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field112Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分保技术要求小类" prop="field113">
            <el-select
              v-model="formData.field113"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field113Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行为类别" prop="field114">
            <el-select
              v-model="formData.field114"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field114Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监管对象" prop="field115">
            <el-select
              v-model="formData.field115"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field115Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行业属性" prop="field116">
            <el-select
              v-model="formData.field116"
              placeholder="请选择行业属性"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field116Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="一票否决权" prop="field127">
            <el-select
              v-model="formData.field127"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field127Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="超期未处置触发条件" prop="field128">
            <el-select
              v-model="formData.field128"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field128Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import diaf from "./diaform.json";
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field104: undefined,
        field105: undefined,
        field129: undefined,
        field107: undefined,
        field108: undefined,
        field109: undefined,
        field110: undefined,
        field111: undefined,
        field112: undefined,
        field113: undefined,
        field114: undefined,
        field115: undefined,
        field116: undefined,
        field127: undefined,
        field128: undefined,
      },
      rules: {
        field101: [
          {
            required: true,
            message: "请输入事件名称",
            trigger: "blur",
          },
        ],
        field102: [
          {
            required: true,
            message: "请输入标识符",
            trigger: "blur",
          },
        ],
        field103: [],
        field104: [],
        field105: [
          {
            required: true,
            message: "是否展示不能为空",
            trigger: "change",
          },
        ],
        field129: [
          {
            required: true,
            message: "请输入单行文本",
            trigger: "blur",
          },
        ],
        field107: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        field108: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        field109: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        field110: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        field111: [
          {
            multiple: false,
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        field112: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        field113: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        field114: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        field115: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        field116: [
          {
            required: true,
            message: "请选择行业属性",
            trigger: "change",
          },
        ],
        field127: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        field128: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
      },
      field105Options: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 2,
        },
      ],
      field107Options: [
        {
          label: "特别重大",
          value: 1,
        },
        {
          label: "重大",
          value: 2,
        },
        {
          label: "较大",
          value: 3,
        },
        {
          label: "一般",
          value: 4,
        },
      ],
      field108Options: [
        {
          label: "用户违规",
          value: 1,
        },
        {
          label: "运维异常",
          value: 2,
        },
        {
          label: "网络攻击",
          value: 3,
        },
        {
          label: "设施设备故障",
          value: 4,
        },
      ],
      field109Options: [
        {
          label: "终端",
          value: 1,
        },
        {
          label: "网络",
          value: 2,
        },
        {
          label: "应用",
          value: 3,
        },
      ],
      field110Options: [
        {
          label: "违规",
          value: 1,
        },
        {
          label: "攻击",
          value: 2,
        },
        {
          label: "异常",
          value: 3,
        },
        {
          label: "脆弱",
          value: 4,
        },
        {
          label: "不涉及",
          value: 4,
        },
      ],
      field111Options: [],
      field112Options: [
        {
          label: "基本保护要求",
          value: 1,
        },
        {
          label: "运行安全",
          value: 2,
        },
        {
          label: "物理安全",
          value: 3,
        },
        {
          label: "信息安全保密",
          value: 4,
        },
      ],
      field113Options: [
        {
          label: "物理隔离",
          value: 1,
        },
        {
          label: "安全域边界防护",
          value: 2,
        },
        {
          label: "运行管理",
          value: 3,
        },
      ],
      field114Options: [
        {
          label: "违规行为",
          value: 1,
        },
        {
          label: "异常行为",
          value: 2,
        },
        {
          label: "一般行为",
          value: 3,
        },
      ],
      field115Options: [
        {
          label: "基础网络监管",
          value: 1,
        },
        {
          label: "涉密人员监管",
          value: 2,
        },
        {
          label: "涉密应用监管",
          value: 3,
        },
        {
          label: "涉密主机监管",
          value: 4,
        },
      ],
      field116Options: [
        {
          label: "电政保密体系",
          value: 1,
        },
        {
          label: "纪委体系",
          value: 2,
        },
        {
          label: "公安技侦",
          value: 3,
        },
      ],
      field127Options: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 2,
        },
      ],
      field128Options: [
        {
          label: "超24小时未处置",
          value: 1,
        },
        {
          label: "超7天未处置",
          value: 2,
        },
        {
          label: "超1月未处置",
          value: 2,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    console.log(diaf);
    this.field111Options = diaf.data.children.map((item, index) => {
      return {
        value: item.tagId,
        label: item.tagName,
        children: this.get111(item.children),
      };
    });
  },
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    get111(item, index) {
      if (item) {
        return item.map((item, index) => {
          return {
            value: item.tagId,
            label: item.tagName,
        
          };
        }
        )
      } else {
        return ;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
